<template>
  <div class="writeScene">
    <header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/projectDepartMain' }">部门</el-breadcrumb-item>
        <el-breadcrumb-item>{{isWrite ? '编辑' : '添加'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </header>
    <div class="title">{{isWrite ? '编辑部门' : '添加部门'}}</div>
    <!-- 中间表单 -->
    <div class="main">
      <div class="header">
        <span></span>
        <p>部门信息</p>
      </div>
      <el-form :model="param" :rules="rules" ref="ruleForm" label-width="290px">
        <el-form-item label="部门名称：" prop="webDeptName">
          <el-input v-model="param.webDeptName" placeholder="请输入部门名称" style="width:400px" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="部门描述：" prop="webDeptRemark">
          <el-input
            type="textarea"
            placeholder="请输入部门描述"
            v-model="param.webDeptRemark"
            maxlength="40"
            show-word-limit
            :rows="8"
            style="width:560px"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addDepart, updateDepart, getDepart } from '../../../../api/projectDepartment'
export default {
  data () {
    return {
      param: {
        webDeptId: '',
        webDeptName: '',
        webDeptRemark: ''
      },
      rules: {
        webDeptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm (ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          if (this.isWrite) {
            updateDepart(this.param).then(
              res => {
                if (res.data.code === 200) {
                  this.$message({
                    type: 'success',
                    message: res.data.message
                  })
                  this.$store.dispatch('projectDepartment/updateTable', this.pageIndex)
                  this.$router.push('/projectDepartMain')
                } else {
                  this.$message({
                    type: 'error',
                    message: res.data.message
                  })
                }
              }
            )
          } else {
            addDepart(
              this.param.webDeptName,
              this.param.webDeptRemark
            ).then(res => {
              if (res.data.code === 200) {
                this.$message({
                  type: 'success',
                  message: res.data.message
                })
                this.$store.dispatch('projectDepartment/updateTable', this.pageIndex)
                this.$router.push('/projectDepartMain')
              } else {
                this.$message({
                  type: 'error',
                  message: res.data.message
                })
              }
            })
          }
        } else {
          this.$message({
            message: '请填写相关信息',
            type: 'error',
            duration: 500
          })
        }
      })
    }
  },
  mounted () {
    const webDeptId = sessionStorage.getItem('webDeptId')
    if (webDeptId) {
      getDepart(webDeptId).then(res => {
        if (res.data.code === 200) {
          this.param = res.data.data
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    }
  },
  computed: {
    isWrite () {
      const userId = sessionStorage.getItem('webDeptId')
      return !!userId
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../../styles/writeBox.scss";
.writeScene {
  padding: 0 30px 30px 30px !important;
  .navButton {
    padding: 0;
    color: #4868ff;
  }
  .main {
    // height: calc(100% - 114px) !important;
    ::v-deep .el-form {
      margin-left: 200px;
      height: calc(100% - 85px);
      margin: 0;
      .el-button {
        position: absolute;
        bottom: 30px;
        left: 300px;
        width: 172px;
        height: 48px;
        background: rgba(72, 104, 255, 1);
        border-radius: 24px;
      }
      .el-form-item__label{
        width: 300px !important;
        padding: 0;
      }
      .el-input{
        margin-left: 10px;
      }
      .el-textarea{
        margin-left: 10px;
      }
    }
  }
}
</style>
<style lang="scss">
.el-form-item.is-required:not(.is-no-asterisk)
  .el-form-item__label-wrap
  > .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
  content: "*";
  color: #4868ff;
  margin-right: 4px;
}
.el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 100px;
}
</style>
